<template>
    <div>
        <div class="margin-top">
            <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="年份" prop="year">
                     <el-date-picker v-model="formData.year" type="year" placeholder="选择年" value-format="yyyy"></el-date-picker>
                </el-form-item>                    
                <el-form-item label="类型" prop="type_id">
                    <el-select v-model="formData.type_id" placeholder="类型">
                        <el-option :label="item.name" :value="item.id" v-for="(item,index) in typeList"></el-option>
                    </el-select>
                </el-form-item>                  
                <el-form-item label="销售额" prop="amount">
                    <el-input v-model="formData.amount" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"></el-input>
                </el-form-item>                          
                <el-form-item label="占比" prop="rate">
                    <el-input v-model="formData.rate" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"></el-input>
                </el-form-item>                           
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "ClientAdd",
    data() {
        return {
            typeList: [],              
            formData: {
                type_id:'',
                year:'',
                rate:'',
                amount:'',
            },
            rules: {
                year: [
                    { required: true},
                ],
                type_id: [
                    { required: true, message: '请填写'}
                ],
                rate: [
                    { required: true, message: '请填写'}
                ],  
                amount: [
                    { required: true, message: '请填写'}
                ],                               
            }            
        }
    },
    mounted() {
        this.getType();
    },
    methods:{            
        create() {
            let _this = this;
            this.$http.httpPost({
                url:'/api/client/store',
                datas:this.formData,
                success(res){
                    _this.$utils.success('创建成功！');
                    _this.$router.replace({path:'/client'});
                }
            })
        },
        getType(){
            let _this = this;
            this.$http.httpPost({
                url:'/api/client/type',
                datas:null,
                success(res){
                    _this.typeList = res.data ? res.data : [];
                }
            })
        },                
        submitForm(formName) {
            //存在回调的方法，因为回调外和回调内的作用域不一致，所以务必为 _this 复制 this，否则在回调中无法访问this对象
            let _this = this;
            //通过传递form表单ref名称，来调用表单的validate方法
            this.$refs[formName].validate((valid) => {
                //为true时验证通过
                if (valid) {
                    _this.create();                  
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$utils.message('清空');
            this.$refs[formName].resetFields();
        },       
    }
}
</script>
